
var myChart = echarts.init(document.getElementById("splish"));

myChart.setOption({
  tooltip: {
    trigger: 'axis',
    confine: true,//将tooltip限制在图表区域内
    axisPointer: {
      type: 'shadow', // 修改type设置成 shadow。使鼠标经过显示虚线改为局部阴影
      shadowStyle: {
        color: 'rgba(0, 0, 0, 0.2)',
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 3,
        shadowOffsetY: 3
      },
    },
    backgroundColor: 'rgba(255,255,255,0.7)', // 设置遮罩层颜色为白色，透明度为0.7
    formatter: function (params) {
      var len = params.length;
      var result = '';
      var x = params[0].name;
      for (let i = 0; i < len; i++) {
        let color = params[i].color;
        let name = params[i].seriesName;
        var value = params[i].data;
        result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + ';"></span>' + name + ' : ' + value + '%<br>';
      }
      result = x + '<br>' + result;
      return result;
    }
  },
  legend: {
    data: ['字段1', '字段2'],
    textStyle: {
      color: '#fff'
    }
  },
  toolbox: {
    show: true,
  },
  calculable: true,
  dataZoom: {
    show: false,
    realtime: true,
    start: 20,
    end: 80
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['2022年9月', '2022年10月', '2022年11月', '2022年12月', '2023年1月', '2023年2月', '2023年3月', '2023年4月'],
      axisLabel: {
        rotate: -90,//使X轴下方的文本由水平改为垂直
        textStyle: {
          color: '#8296ba' // 修改X轴文本的颜色
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: -10,
      max: 50,
      axisLabel: {
        formatter: '{value}%',//将Y轴显示的数据改为百分比显示
        textStyle: {
          color: '#8296ba' // 修改Y轴文本的颜色
        }
      },
      axisLine: {
        show: true,//给折线图添加Y轴的实线
        lineStyle: {//实线的规格
          type: 'solid',
          width: 1,
          color: '#8b8c89'
        }
      }
    },

  ],
  series: [
    {
      name: '字段1',
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(255,228,181,0.5)'
        }, {
          offset: 1,
          color: 'rgba(255,228,181,0)'
        }])
      },
      lineStyle: {
        color: '#df8f8f' // 设置折线的颜色为橙色
      },
      itemStyle: {
        normal: {
          lineStyle: {
            width: 2
          }
        },
        emphasis: {
          color: '#df8f8f', // 鼠标移入时显示的圆点颜色，与线条颜色保持一致
          borderColor: 'rgba(0, 0, 0, 0.2)',
          borderWidth: 10
        }
      },
      data: [
        5, -4, 12, 28, 40, 15, 18, 32, 18
      ]

    },
    {
      name: '字段2',
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(255,228,181,0.5)'
        }, {
          offset: 1,
          color: 'rgba(255,228,181,0)'
        }])
      },
      lineStyle: {
        color: '#dcdc8d' // 设置折线的颜色为橙色
      },
      itemStyle: {
        normal: {
          lineStyle: {
            width: 2
          }
        },
        emphasis: {
          color: '#df8f8f', // 鼠标移入时显示的圆点颜色，与线条颜色保持一致
          borderColor: 'rgba(0, 0, 0, 0.2)',
          borderWidth: 10
        }
      },
      data: [
        -8, 5, 11, 18, 28, 19, 10, 6, 35
      ]
    }
  ]
})